<script setup lang="ts">
definePageMeta({
  layout: 'default2',
  title: '邮件',
  i18n: 'menu.email',
})
const router = useRouter();
const active = ref(0);
const { t } = useI18n();
const tabArr = [
  {
    id: 0,
    name: t('my_page.email.all')
  },
  {
    id: 1,
    name: t('my_page.email.readed')
  },
  {
    id: 2,
    name: t('my_page.email.read')
  },
]
const allArr = [
  {
    id: 0,
    name: '邮件标题1',
    time: '2025-04-23 18:00:00',
    cont: '我是内容啊我是内容啊我是内容啊我是内容啊',
    isRead: true
  },
  {
    id: 1,
    name: '邮件标题2',
    time: '2025-04-23 18:00:00',
    cont: '我是内容啊我是内容啊我是内容啊我是内容啊我是内容啊我是内容啊我是内容啊我是内容啊',
    isRead: false
  },
  {
    id: 2,
    name: '邮件标题4',
    time: '2025-04-23 18:00:00',
    cont: '我是内容啊我是内容啊',
    isRead: true
  },
]

const goDetails = (v: any) => {
  router.push({
    path: '/my/email/info',
    // query: {
    //   v:v.id
    // }
  })
}
</script>

<template>
  <div mx-auto text-16 text-dark dark:text-white>
    <!-- tab标签 -->
    <div class="flex items-center bg-#ffffff h-40 px-16">
      <div v-for="(v, index) in tabArr" :key="v.id"
        class=" color-#747684 bg-#f2f2f6 text-12  rounded-20 mr-10 w-45 text-center"
        :class="{ 'active-tab': active == index }" @click="active = index">{{ v.name }}</div>
    </div>
    <div class="m-10 text-12 color-#6a6d76">{{ t('my_page.email.notes') }}</div>
    <!-- 内容 -->
    <div v-if="active == 0">
      <div class="">
        <div class="flex items-end justify-between  w-full  bg-#ffffff pt-15  px-10"
          v-for="(v, i) in allArr" :key="i" @click="goDetails(v)">
          <div class="flex items-center w-full ">
            <div class="relative ">
              <img v-if="v.isRead" src="/img/email.png" alt="" class="w-35 pb-15">
              <img v-else src="/img/email.png" alt="" class="w-35 pb-15">
              <div class="w-8 h-8 rounded-full bg-red absolute top--4 right-0"></div>
            </div>
            <div class="ml-10 flex-1 w-full border-b-1 border-#f6f6f6 pb-15">
              <div class="flex justify-between items-center w-full">
                <div class="font-bold text-14 mb-4 color-#1a1d22">{{ v.name }}</div>
                <div class="text-12 color-#6b6f7b ">{{ v.time }}</div>
              </div>
              <div class="text-12 text-#757688 w-290 overflow-hidden whitespace-nowrap text-ellipsis">{{ v.cont }}</div>
            </div>
          </div>

        </div>
      </div>
    </div>
    <div v-if="active == 1"></div>
    <div v-if="active == 2"></div>
  </div>
</template>
<style lang="css" scoped>
.active-tab {
  color: #539cd6;
  border: 1px solid #539cd6;
  background: #ffffff;
}
</style>